<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<head>
<title>_预约入库信息</title>
<style type="text/css">
	.chosen-container {
		width: 100%!important;
	}
</style>
<script type="text/javascript" src="${ctx}/static/v2/js/modal.js"></script>
<script type="text/javascript">
	var boxCount =  "${fn:length(vo.instorageBillBoxPres)}";
	var skuCount =  "${fn:length(vo.instorageBillItemPres)}";
	var batchCode = "";
	var productDate = "";
	var expireDate = "";
	$(function() {
		$("#addForm").validate();
		$("#preSendTm").datepicker({
			format : 'yyyy-mm-dd'
		});
		//如果是已发货，或已点收，灰掉按钮
		if("${vo.instorageBillPre.orderStatus}" == "1" || "${vo.instorageBillPre.orderStatus}" == "2"){
			$(":button").remove();
		}
		bindCheckBox($("input[name=boxCheckBox]"));
	});
   /*
	* 绑定为iCheck样式
	*/
	function bindCheckBox(boxes){
		boxes.iCheck({checkboxClass: 'icheckbox_minimal'});
		boxes.on("ifChecked", function(event){
			$("input[name=boxCheckBox]").not($(this)).iCheck('uncheck'); 
			$("#box_"+event.target.value).css("background","#3c8dbc");
		});
		boxes.on("ifUnchecked", function(event){
			$("#box_"+event.target.value).removeAttr("style");
		});
	}
	/*
	*新增一行货箱信息
	*/
	function addOneRow2Box(){
		var boxCode = $.trim($("#boxCode").val());
		var boxWeight = $.trim($("#boxWeight").val());
		boxWeight = boxWeight =='' ? 0 : boxWeight;
		if(boxCode == ''){
			return;
		}
		if(!checkExists(boxCode,'box')){
			var boxHtml = "<tr id='box_"+boxCode+"'>";
			boxHtml += "<td><input type='checkbox' id='check_"+ boxCode +"' name='boxCheckBox' value='"+boxCode+"'></td>";
			boxHtml += "<td><input type='text' class='required' name='instorageBillBoxPres["+boxCount+"].boxCode' value='"+boxCode+"' readOnly></td>";
			boxHtml += "<td><input class='number' type='text' name='instorageBillBoxPres["+boxCount+"].boxWeight' value='"+boxWeight+"' readOnly></td>";
			boxHtml += "<td><button type='button' class='btn btn-danger' onclick='deleteItem(\""+boxCode+"\",\"box\");'>删除</button></td>";
			boxHtml += "</tr>";
			$("#boxInfos").append(boxHtml);
			boxCount++;
			$("#boxCode").val('');
			$("#boxWeight").val('');
			$("#boxCode").focus();
			//重新绑定
			bindCheckBox($("#check_"+boxCode));
			//选中当前行
			$("#check_"+boxCode).iCheck("check");
		}else{
			alert("您输入的货箱信息已存在，请确认输入是否正确");
		}
	}
	/*
	*新增一行SKU信息
	*/
	function addOneRow2Sku(){
		var boxSelected = getSelectRow('boxCheckBox');
		if(boxSelected.length == 0){
			jAlert("请先选择SKU对应的货箱信息");
			return;
		}
		var reg = /^[a-zA-Z0-9-]*$/g;
		var sku = $.trim($("#sku").val());
		var skuNum = $.trim($("#skuNum").val());
		var box = boxSelected.val();
		
		if(sku == '' || skuNum == '' || !reg.test(sku)){
			jAlert("SKU只能输入大写字母,数字");
			return;
		}
		
		//判断Sku数量不为0
		if(!checkSkuNum(skuNum))
			return;
		
		 if(!checkSku2()){
			alert("商品" + sku + "在商家" + $.trim($("#customerCode").val()) +"下不存在.");
			return;
		} 
		
		if (checkExists(box+"_"+sku+"_"+batchCode+"_"+productDate+"_"+expireDate, 'box_sku')) {
			$("#skuNum_"+box+"_"+sku+"_"+batchCode+"_"+productDate+"_"+expireDate).val(Number($("#skuNum_"+box+"_"+sku+"_"+batchCode+"_"+productDate+"_"+expireDate).val())+Number($("#skuNum").val()));
		} else {
			var boxHtml = "<tr id='box_sku_"+box+"_"+sku+"_"+batchCode+"_"+productDate+"_"+expireDate+"'>";
			boxHtml += "<td><input type='text' class='required' name='instorageBillItemPres["+skuCount+"].skuCode' value='"+sku+"' readOnly></td>";
			boxHtml += "<td/>";
			boxHtml += "<td><input type='text' style = \"width: 50px\"  class='digits required' name='instorageBillItemPres["+skuCount+"].goodsNum' value='"+Number($("#skuNum").val())+"' id='skuNum_"+box+"_"+sku+"_"+batchCode+"_"+productDate+"_"+expireDate + "' readOnly></td>";
			boxHtml += "<td><input type='text' style = \"width: 100px\" name='instorageBillItemPres["+skuCount+"].batchCode' value='"+batchCode+"' readOnly></td>";
			boxHtml += "<td><input type='text' style = \"width: 100px\" name='instorageBillItemPres["+skuCount+"].productDate' value='"+productDate+"' readOnly></td>";
			boxHtml += "<td><input type='text' style = \"width: 100px\" name='instorageBillItemPres["+skuCount+"].expireDate' value='"+expireDate+"' readOnly></td>";
			boxHtml += "<td><input type='text' style = \"width: 50px\" name='instorageBillItemPres["+skuCount+"].boxCode' value='"+box+"' readOnly></td>";
			boxHtml += "<td><button type='button' class='btn btn-danger' onclick='deleteItem(\""+ box+"_"+sku+"_"+batchCode+"_"+productDate+"_"+expireDate+ "\",\"box_sku\");'>删除</button></td>";
			boxHtml += "</tr>";
			$("#skuInfos").append(boxHtml);
			skuCount++;
		}
		batchCode = "";
		productDate = "";
		expireDate = "";
		$("#sku").val('');
		$("#skuNum").val('');
		$("#sku").focus();
		batchTime = 0;
	}
	/*
	 *删除一行
	 */
	function deleteItem(itemId, type) {
		$("#" + type + "_" + itemId).remove();
		adjustIndex("instorageBillItemPres","skuCode");
		adjustIndex("instorageBillItemPres","goodsNum");
		adjustIndex("instorageBillItemPres","boxCode");
		//删除货箱信息时，同时删除SKU信息
		if ("box" == type) {
			$("tr[id^=box_sku_"+itemId+"]").remove();
			adjustIndex("instorageBillBoxPres","boxCode");
			adjustIndex("instorageBillBoxPres","boxWeight");
		}
	}
	
   /*
	*调整表格中name属性，防止传入后台的name中有不连续的
	*/
	function adjustIndex(prefix,suffix){
		$("input[name^="+prefix+"]"+"[name$="+suffix+"]").each(function(n){
			$(this).attr("name",prefix+"["+n+"]"+"."+suffix);
		});
	}
	
	/*
	 *单选控制
	 */
	function singleCheck(obj) {
		if ($(obj).is(":checked")) {
			$(':checkbox[name=boxCheckBox]').prop('checked', false);
			$(obj).prop('checked', true);
		}
	}
	/*
	 *校验新增的是否已存在
	 */
	function checkExists(itemId, type) {
		if ($("#" + type + "_" + itemId).length > 0) {
			return true;
		}
		return false;
	}
	/*
	 *获取选中行的数据
	 */
	function getSelectRow(name) {
		return $("input[name='" + name + "']:checked");
	}
	function onsave(status){
		if($("#customerCode").val() != 'ZJDS'){
			var openQm = $("#customerCode").find("option:selected").attr("openqm");
			if(openQm == "1"){
				jAlert("奇门商家不允许手工创建预约单！");			
				return;
			}
		}
		//确认发货时,车牌号必填
		if(status==1){
			$("#carNo").attr("class","required");
		}else{
			$("#carNo").removeAttr("class");
		}
		$("#orderStatus").val(status);
		$("#addForm").submit();
	}
	
	//验证SkuNum不为0
	function checkSkuNum(obj){
		if(obj == '0'){
			alert("SKU数量不能为0,请重新输入!");
			return false;
		}else{
			return true;
		}
	}
	
	//验证sku在当前商家存在
	var batchTime = 0;
	function checkSkuBlur() {
		if (batchTime == 0) {
			getBatchInfo();
		}
	}
	function checkSkuKey() {
		// $("#sku").blur();
		getBatchInfo();
	}
	function getBatchInfo() {
		var sku = $.trim($("#sku").val());
		var customerCode = $.trim($("#customerCode").val());
		var flag = false;
		$.ajax({
			type : 'post',
			url  : '${ctx}/goods/checkGoods',
			async : false,
			data : {customerCode:customerCode,
				    sku:sku},
			dataType : 'json',
			success : function(data) {
				batchTime = 1;
				if(data.status == "success"){
					if(data.isShelfLifeMgmt == "1" || data.isBatchMgmt == "1"){
						var batchList;
						batch(data.isShelfLifeMgmt, data.isBatchMgmt,'',function(batchList){
							batchCode = batchList[0].batch_input == undefined ? '' : batchList[0].batch_input;
							productDate = batchList[1].batch_start == undefined ? '' : batchList[1].batch_start;
							expireDate = batchList[2].batch_end == undefined ? '' : batchList[2].batch_end;
							$('#skuNum').focus();
						});
						flag = true;
					} else{
						batchCode = '';
						productDate = '';
						expireDate = '';
						flag = true;
					}
					$('#skuNum').focus();
				} else{
					alert(data.content);
				}
			},
			error : function() {
				alert("验证失败!");
			}
		});
		return flag;
	}
	
	function checkSku2(){
		var sku = $.trim($("#sku").val());
		var customerCode = $.trim($("#customerCode").val());
		var flag = false;
		
		$.ajax({
			type : 'post',
			url  : '${ctx}/v2/preInstorageBill/checkSku',
			async : false,
			data : {customerCode:customerCode,
				    sku:sku},
			dataType : 'json',
			success : function(data) {
				if(data.status == "success"){
						$('#skuNum').focus();
						flag = true;
				}else{
					alert(data.content);
				}
				
			},
			error : function() {
				alert("验证失败!");
			}
		});
		return flag;
	}
	
</script>
</head>

<body>

	<section class="content">
	<form class="form-horizontal" id="addForm" action="${ctx}/v2/preInstorageBill/createPreInstorage" method="post">
		<div class="row">
			<div class="col-md-12">

				<!-- Primary box -->
				<div class="box box-solid box-primary">
					<div class="box-header">

						<h3 class="box-title">预约信息</h3>
						<div class="box-tools pull-right">
							<button class="btn btn-primary btn-sm" data-widget="collapse" type="button">
								<i class="fa fa-minus"></i>
							</button>
						</div>
					</div>
					<div class="box-body">

						<div class="form-group row">
							<div class="col-sm-3">
								<div class="input-group col-sm-12">
									<span class="input-group-text"> 预计到货时间： </span>
									<div class="input-group">
										<div class="input-group-addon">
											<i class="fa fa-calendar"></i>
										</div>
										<input type="text" class="form-control pull-right required"id="preSendTm" name="instorageBillPre.preSendTm" value="<fmt:formatDate value='${vo.instorageBillPre.preSendTm}' pattern='yyyy-MM-dd'/>"/>
									</div>

								</div>
							</div>


							<div class="col-sm-3">
								<div class="input-group col-sm-12">
									<span class="input-group-text"> 车牌号： </span> 
									<input class="form-control" type="text" id="carNo" name="instorageBillPre.carNo" value="${vo.instorageBillPre.carNo}"/>
								</div>
							</div>

							<div class="col-sm-3">
								<div class="input-group col-sm-12">
									<span class="input-group-text"> 商家名称： </span> 
									<select class="form-control required" id="customerCode" name="instorageBillPre.customerCode" onchange="ajaxAreaGroup(this,'warehouseCode')">
										<option value=""></option>
										<c:forEach items="${customerList}" var="customer">
											<option value="${customer.customerCode}" openqm="${customer.openQm}"
												<c:if test="${vo.instorageBillPre.customerCode eq customer.customerCode}">selected=selected</c:if>>${customer.customerName}</option>
										</c:forEach>
									</select>
								</div>
							</div>

							<div class="col-sm-3">
								<div class="input-group col-sm-12">
									<span class="input-group-text"> 仓库名称： </span> 
									<select class="form-control span3 required" id="warehouseCode" name="instorageBillPre.inwarehouseCode" onclick="ajaxAreaGroup('customerCode', this)">
										<option value=""></option>
										<c:forEach items="${warehouseList}" var="warehouse">
											<option value="${warehouse.groupCode}"
												<c:if test="${vo.instorageBillPre.inwarehouseCode eq warehouse.groupCode }">selected=selected</c:if>>${warehouse.groupName}</option>
										</c:forEach>
									</select>
								</div>
							</div>
						</div>
						<!-- 预约单状态 -->
						<input type="hidden" value="${vo.instorageBillPre.orderStatus}" id="orderStatus" name="instorageBillPre.orderStatus">
						<input type="hidden" value="${vo.instorageBillPre.id}" id="orderId" name="instorageBillPre.id">
						<div class="form-group row">


							<div class="col-sm-6">
								<div class="input-group col-sm-12">
									<span class="input-group-text"> 备注： </span> 
									<input class="form-control" type="text" id="remark" value="${vo.instorageBillPre.remark}" name="instorageBillPre.remark"/>
								</div>
							</div>
						</div>

					</div>

				</div>
				<!-- /.box-body -->

			</div>
			<!-- /.col -->
		</div>
		<!-- /.row -->

		<div class="form-group row">
			<div class="col-md-5">
				<div class="box box-primary">
					<div class="box-header">
						<h3 class="box-title">货箱信息</h3>
						<div class="box-tools pull-right">
							<button class="btn btn-primary btn-xs" data-widget="collapse" type="button">
								<i class="fa fa-minus"></i>
							</button>
						</div>
					</div>
					<div class="box-body">


						<div class="form-group row">
							<div class="col-sm-6">
								<div class="input-group col-sm-12">
									<span class="input-group-text"> 箱条码： </span> <input
										class="form-control" type="text" id="boxCode" onkeydown="if(event.keyCode == '13'){$('#boxWeight').focus();}">
								</div>
							</div>

							<div class="col-sm-6">
								<div class="input-group col-sm-12">
									<span class="input-group-text"> 重量： </span> <input
										class="form-control digits" type="text" id="boxWeight" onkeydown="if(event.keyCode == '13' && ('${vo.instorageBillPre.orderStatus}' != '1' && '${vo.instorageBillPre.orderStatus}' != '2')){addOneRow2Box();}">

								</div>
							</div>

						</div>
						
						<table class="table table-bordered table-condensed" id="boxTable">
							<thead>
								<tr>
									<th style="width: 30px;"></th>
									<th>箱条码</th>
									<th>重量</th>
									<th style="width: 50px;">操作</th>
								</tr>
							</thead>
							<tbody id="boxInfos">
								<c:forEach items="${vo.instorageBillBoxPres}" var="box" varStatus="boxs">
								<tr id='box_${box.boxCode}'>
								
								<td><input type="checkbox" name='boxCheckBox' value='${box.boxCode}'></td>
								<td><input type='text' class='required' name='instorageBillBoxPres[${boxs.index}].boxCode' value='${box.boxCode}' readOnly></td>
								<td><input class='number' type='text' name='instorageBillBoxPres[${boxs.index}].boxWeight' value='${box.boxWeight}'></td>
								<td><button type='button' class='btn btn-danger' onclick="deleteItem('${box.boxCode}','box');">删除</button></td>
								</tr>
								</c:forEach>
							</tbody>
						</table>

					</div>
				</div>
				<!-- /.box -->
			</div>
			<!-- /.col -->
			<div class="col-md-7">
				<div class="box box-primary">
					<div class="box-header">
						<h3 class="box-title">SKU信息</h3>
						<div class="box-tools pull-right">
							<button class="btn btn-primary btn-xs" data-widget="collapse" type="button">
								<i class="fa fa-minus"></i>
							</button>
						</div>
					</div>
					<div class="box-body">


						<div class="form-group row">
							<div class="col-sm-6">
								<div class="input-group col-sm-12">
									<span class="input-group-text"> SKU： </span> 
									<input class="form-control" type="text" id="sku" onkeydown="if(event.keyCode == '13'){checkSkuKey();}">
								</div>
							</div>
						   
							<div class="col-sm-6">
								<div class="input-group col-sm-12">
									<span class="input-group-text">商品数量： </span> <input
										class="form-control digits" type="text" id="skuNum" onkeydown="if(event.keyCode == '13' && ('${vo.instorageBillPre.orderStatus}' != '1' && '${vo.instorageBillPre.orderStatus}' != '2')){addOneRow2Sku();}" onfocus="checkSkuBlur()">

								</div>
							</div>

						</div>


						<table class="table table-striped table-bordered table-condensed">
							<thead>
								<tr>
									<th>SKU</th>
									<th>商品名称</th>
									<th>商品数量</th>
									<th>批次号</th>
									<th>生产日期</th>
									<th>过期日期</th>
									<th>箱条码</th>
									<th style="width: 50px;">操作</th>
								</tr>
							</thead>
							<tbody id="skuInfos">
							<c:forEach items="${vo.instorageBillItemPres}" var="skuItem" varStatus="skus">
								<tr id='box_sku_${skuItem.boxCode}_${skuItem.skuCode}__${skuItem.batchCode}__${skuItem.productDate}__${skuItem.expireDate}'>
									<td><input type='text' class='required text-center' style="border:none;" name='instorageBillItemPres[${skus.index}].skuCode' value='${skuItem.skuCode}' readOnly></td>
									<td><input type='text' style="width: 150px;border:none;" class="text-center" value='${skuItem.skuBar}' readOnly></td>
									<!-- style="width: 150px"  -->
									<td>
									<input type='text' style="width: 50px;border:none;" class='digits required text-center' name='instorageBillItemPres[${skus.index}].goodsNum' id='skuNum_${skuItem.boxCode}_${skuItem.skuCode}__${skuItem.batchCode}__${skuItem.productDate}__${skuItem.expireDate}' value='${skuItem.goodsNum}' >
									</td>
									<td><input type='text' class="text-center" style="width: 100px;border:none;" value='${skuItem.batchCode}' readOnly></td>
									<td><input type='text' class="text-center" style="width: 100px;border:none;" value='${skuItem.productDate}' readOnly></td>
									<td><input type='text' class="text-center" style="width: 100px;border:none;" value='${skuItem.expireDate}' readOnly></td>
									<td><input type='text' class="text-center" style="width: 50px;border:none;" name='instorageBillItemPres[${skus.index}].boxCode' value='${skuItem.boxCode}' readOnly></td>
									<td><button type='button' class='btn btn-danger' onclick="deleteItem('box_sku_${skuItem.boxCode}_${skuItem.skuCode}__${skuItem.batchCode}__${skuItem.productDate}__${skuItem.expireDate}','box_sku');">删除</button></td>
								</tr>
							</c:forEach>
							</tbody>
						</table>
					</div>
				</div>
				<!-- /.box -->
			</div>
			<!-- /.col -->

		</div>
		<!-- /.row -->

		<p align="center">
			<button class="btn btn-primary btn-lg" type="button" onclick="onsave(0);" >提交预约单</button>
			<button class="btn btn-primary btn-lg" type="button" onclick="onsave(1);" >确认发货</button>
		</p>
		</form>
	</section>


</body>
</html>